<template>
  <div class="home">
    <!-- <home-header :value="value" @input="change"></home-header> 优化-->
    <!-- vue3.x 中将async 去掉了 -->
    <home-header v-model="currentCategory"></home-header>
    <!-- {{ currentCategory }} -->
    <!-- 列表需要用到筛选条件 value -->
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item
        class="myslide"
        v-for="(slide, index) in slides"
        :key="index"
      >
        <img :src="slide.url" alt="" />
      </van-swipe-item>
      <!-- <van-swipe-item>1</van-swipe-item>
      <van-swipe-item>2</van-swipe-item>
      <van-swipe-item>3</van-swipe-item>
      <van-swipe-item>4</van-swipe-item> -->
    </van-swipe>
  </div>
</template>
<script>
import HomeHeader from "./home-header.vue";

import { createNamespacedHelpers } from "vuex";
import * as Types from "@/store/action-types.js";
// 这里拿到的都是home模块下的
let { mapState, mapMutations, mapActions } = createNamespacedHelpers("home");

export default {
  data() {
    return {
      value: -1,
    };
  },
  computed: {
    ...mapState(["category", "slides"]),
    currentCategory: {
      get() {
        return this.category;
      },
      set(val) {
        this[Types.SET_CATEGORY](val);
      },
    },
  },
  components: {
    HomeHeader,
  },
  async mounted() {
    // 页面一加载就开始加载数据
    // 如果vuex中有数据， 直接拿来使用就行
    // 当
    if (this.slides.length === 0) {
      try {
        this[Types.SET_SLIDES]();
      } catch (error) {
        // 错误处理， 和异常处理
        console.log(error);
      }
    }
  },
  methods: {
    ...mapMutations([Types.SET_CATEGORY]),
    ...mapActions([Types.SET_SLIDES]),
    // change(newValue) {
    //   this.value = newValue;
    // },
  },
};
</script>

<style lang="scss" scoped>
.myslide {
  // width: 100%;
  height: 120px;
  img {
    width: 100%;
    height: 100%;
  }
}
</style>
